<template>
  <div>
<!--    <input type="button" @click="addMarkers" class="btn" value="add">
    <input type="button" @click="openInfo" class="btn" value="open">
    <input type="button" class="btn" value="remove">-->

    <div id="container"></div>
  </div>

</template>

<script>
var map, infoWindow = {}
import AMap from 'AMap';

export default {
  name: 'HelloWorld2',

  mounted() {
    this.loadMap()
  },
  data() {
    return {}
  },
  methods: {
    //载入地图
    loadMap() {
      map = new AMap.Map('container', {
        zoom: 15,
        expandZoomRange: true,
        zooms: [4, 18],//设置地图级别范围
        center: [121.447635, 37.464546],//lat,lon
        // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
        pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: '3D',// 地图模式
        resizeEnable: true,//这个好像有问题,自动定位

      });
      map.on('click', this.mapClick)

      this.addMarkers()

      map.setFitView();

    },



//地图点击事件
    mapClick() {
      map.clearInfoWindow()
    },
    //添加标记点
    addMarkers() {
      var lnglats = [
        /*[120.41, 36.54],
        [120.42, 36.54],
        [120.39, 36.58],*/
        /*,
        [120.41, 36.53],
        [120.32, 37.10],
        [120.58, 37.42],
        [121.79, 37.36],
        [121.51, 37.30]
        ,*/
        [120.49, 37.09],
        [120.06, 36.48],
        [120.32, 37.51],
        [120.53, 37.45],
        [120.71, 37.79]
      ];

      var lnglats2 = [
        [121.20, 37.24],
        [119.65, 37.03]
      ];
      this.addInfoWindow()

      // eslint-disable-next-line no-unused-vars
      var endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image: 'https://ae01.alicdn.com/kf/Ue16c54cac6574a06a0c1afdad979b007W.jpg',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3)
      });

      for (var i = 0; i < lnglats.length; i++) {
        var marker = new AMap.Marker({
          position: lnglats[i],
          icon:require('../assets/chiken.jpg'),
          map: map

        });
        marker.content = '我是第' + (i + 1) + '个点';
        marker.on('click', this.markerClick);
        // marker.emit('click', {target: marker});
      }

      for (var i2 = 0; i2< lnglats2.length; i2++) {
        var marker2 = new AMap.Marker({
          position: lnglats2[i2],
          icon:require('../assets/maker_icon.png'),
          map: map

        });
        marker2.content = '我是第' + (i2 + 1) + '个点';
        marker2.on('click', this.markerClick);
        // marker.emit('click', {target: marker});
      }
    },

    //marker的点击事件
    markerClick(e) {
      infoWindow.setContent(e.target.content);
      infoWindow.open(map, e.target.getPosition());
    },
    //添加信息窗口弹出事件
    addInfoWindow() {
      infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    },

    openInfo() {
      var latlon = [121.447635, 37.464546]

      var allOverlays = map.getAllOverlays('marker');


      for (let i = 0, marker; i < allOverlays.length; i++) {
        marker = allOverlays[i];
        if (marker.getPosition().distance(latlon) == 0) {
          map.setZoomAndCenter(18, marker.getPosition())
          infoWindow.setContent(marker.getContent());
          infoWindow.open(map, marker.getPosition());

        }
      }
    /*  for (let i = 0, marker; i < allOverlays.length; i++) {
        marker = allOverlays[i];
        if (marker.getPosition().distance(latlon) == 0) {
          map.setZoomAndCenter(18, marker.getPosition())
          infoWindow.setContent(marker.getContent());
          infoWindow.open(map, marker.getPosition());

        }
      }*/


    }


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


* {
  padding: 0;
  margin: 0;
}

#container {
  //margin: 30px auto;
  //width: 500px;
  //height: 500px;
  width: 100vw;
  height: 100vh;
}

.btn {
  width: 100px;
  height: 100px;
}

/deep/.amap-info-close {
  display: none;

}

</style>
